<template>
  <el-dialog
    v-model="dialogVisible"
    title="脚本节点配置"
    width="700px"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="节点名称">
        <el-input v-model="form.name" placeholder="请输入节点名称" />
      </el-form-item>
      
      <el-form-item label="脚本类型">
        <el-select v-model="form.scriptType" placeholder="选择脚本类型">
          <el-option label="JavaScript" value="javascript" />
          <el-option label="Python" value="python" />
          <el-option label="Shell" value="shell" />
          <el-option label="SQL" value="sql" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="脚本内容">
        <el-input
          v-model="form.scriptContent"
          type="textarea"
          :rows="10"
          placeholder="请输入脚本内容"
        />
      </el-form-item>
      
      <el-form-item label="执行超时">
        <el-input-number
          v-model="form.timeout"
          :min="1"
          :max="3600"
          placeholder="超时时间(秒)"
        />
      </el-form-item>
      
      <el-form-item label="错误处理">
        <el-radio-group v-model="form.errorHandling">
          <el-radio label="continue">继续执行</el-radio>
          <el-radio label="stop">停止流程</el-radio>
          <el-radio label="retry">重试</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  modelValue: boolean
  nodeData?: any
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  nodeData: () => ({})
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'confirm': [data: any]
}>()

const dialogVisible = ref(props.modelValue)

const form = ref({
  name: '',
  scriptType: 'javascript',
  scriptContent: '',
  timeout: 30,
  errorHandling: 'continue'
})

watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
  if (val && props.nodeData) {
    form.value = {
      name: props.nodeData.name || '',
      scriptType: props.nodeData.scriptType || 'javascript',
      scriptContent: props.nodeData.scriptContent || '',
      timeout: props.nodeData.timeout || 30,
      errorHandling: props.nodeData.errorHandling || 'continue'
    }
  }
})

watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})

const handleClose = () => {
  dialogVisible.value = false
}

const handleConfirm = () => {
  emit('confirm', form.value)
  dialogVisible.value = false
}

defineOptions({
  name: 'ScriptConfigDialog'
})
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 